<template>
    <div class="sidebar">
        <!--背景色为侧边栏的颜色-->
        <el-menu
                class="sidebar-el-menu"
                :default-active="onRoutes"
                :collapse="collapse"
                background-color="white"
                text-color="#000000"
                active-text-color="white"
                unique-opened
                router
        >
            <template v-for="item in items">
                <template v-if="item.subs">
                    <el-submenu :key="item.index" :index="item.index">
                        <template slot="title">
                            <i class="icon" :class="item.icon"/>
                            <span slot="title">{{ item.title }}</span>
                        </template>
                        <template v-for="subItem in item.subs">
                            <el-submenu
                                    v-if="subItem.subs"
                                    :key="subItem.index"
                                    :index="subItem.index"
                            >
                                <template slot="title">{{ subItem.title }}</template>
                                <el-menu-item
                                        v-for="(threeItem,i) in subItem.subs"
                                        :key="i"
                                        :index="threeItem.index"
                                >{{ threeItem.title }}
                                </el-menu-item>
                            </el-submenu>
                            <el-menu-item
                                    v-else
                                    :key="subItem.index"
                                    :index="subItem.index"
                            >{{ subItem.title }}
                            </el-menu-item>
                        </template>
                    </el-submenu>
                </template>
                <template v-else>
                    <el-menu-item :key="item.index" :index="item.index">
                        <i :class="item.icon"/>
                        <span slot="title">{{ item.title }}</span>
                    </el-menu-item>
                </template>
            </template>
        </el-menu>
    </div>
</template>

<script>
    import bus from '../common/bus'

    export default {
        data() {
            return {
                collapse: false,
                items: [
                    {
                        icon: 'icon iconfont icon-home',
                        index: 'dashboard',
                        title: '首页'
                    },
                   /* {
                        icon: 'icon iconfont icon-shuju',
                        index: 'DataPage',
                        title: '数据查询',
                        subs: [
                            {
                                icon: 'icon iconfont icon-shuju',
                                index: 'LiveData',
                                title: '实时数据'
                            },
                            {
                                index: 'DataDisplay',
                                title: '一次接图数据展示'
                            }
                        ]
                    },*/
                   /* {
                        icon: 'icon iconfont icon-weiwangguanicon-defuben-',
                        index: 'Warn',
                        title: '预警/告警管理',
                        subs: [
                            {
                                index: 'Info',
                                title: '预告警统计'
                            },
                            {
                                index: 'History',
                                title: '告警历史分析'
                            },
                            {
                                index: 'Remote',
                                title: '远程消音查询'
                            }
                        ]
                    },*/

                    {
                        icon: 'icon iconfont icon-shebei',
                        index: 'Device',
                        title: '用电能耗'

                    },
                    {
                        icon: 'icon iconfont icon-lishishujubukedianji',
                        index: 'HSU',
                        title: '电能采集'

                    },


                    {
                        icon: 'icon iconfont icon-zhibiaozhongxin',
                        index: 'Indicator',
                        title: '电能集抄'
                    },
                    {
                        icon: 'icon iconfont icon-wenjian',
                        index: 'Plan',
                        title: '设备管理'
                    },
                    // {
                    //   icon: 'icon iconfont icon-yonghuguanli',
                    //   index: 'Users',
                    //   title: '用户管理'
                    // },
                    // 组件
                   /* {
                        icon: 'el-icon-setting',
                        index: 'DOEM',
                        title: '一次性接线图',
                        subs: [
                            {
                                index: 'table',
                                title: '基础表格'
                            }, {
                                index: 'tabs',
                                title: 'tab选项卡'
                            }, {
                                index: '3',
                                title: '表单相关',
                                subs: [
                                    {
                                        index: 'form',
                                        title: '基本表单'
                                    },
                                    {
                                        index: '3-2',
                                        title: '三级菜单',
                                        subs: [
                                            {
                                                index: 'editor',
                                                title: '富文本编辑器'
                                            },
                                            {
                                                index: 'markdown',
                                                title: 'markdown编辑器'
                                            }
                                        ]
                                    },
                                    {
                                        index: 'upload',
                                        title: '文件上传'
                                    }
                                ]
                            },
                            {
                                icon: 'el-icon-setting',
                                index: 'icon',
                                title: '自定义图标'
                            },
                            {
                                icon: 'el-icon-setting',
                                index: 'charts',
                                title: 'schart图表'
                            },
                            {
                                icon: 'el-icon-setting',
                                index: '6',
                                title: '拖拽组件',
                                subs: [
                                    {
                                        index: 'drag',
                                        title: '拖拽列表'
                                    },
                                    {
                                        index: 'dialog',
                                        title: '拖拽弹框'
                                    }
                                ]
                            },
                            {
                                icon: 'el-icon-setting',
                                index: 'i18n',
                                title: '国际化功能'
                            },
                            {
                                icon: 'el-icon-setting',
                                index: '7',
                                title: '错误处理',
                                subs: [
                                    {
                                        index: 'permission',
                                        title: '权限测试'
                                    },
                                    {
                                        index: '404',
                                        title: '404页面'
                                    }
                                ]
                            }
                        ]
                    },*/
                    {
                        icon: 'icon iconfont icon-zhibiaozhongxin',
                        index: 'Indicator',
                        title: '药友制药',
                        subs: [
                            {
                                index: 'basics',
                                title: '总体详情'
                            },
                            {
                                index: 'Config',
                                title: '园区详情'
                            }
                        ]
                    },
                    // end
                ]
            }
        },
        computed: {
            onRoutes() {
                return this.$route.path.replace('/', '')
            }
        },
        created() {
            // 通过 Event Bus 进行组件间通信，来折叠侧边栏
            bus.$on('collapse', msg => {
                this.collapse = msg
                bus.$emit('collapse-content', msg)
            })
        }
    }
</script>

<style scoped leng='scss'>
    .sidebar {
        display: block;
        position: absolute;
        left: 0;
        top: 92px;
        bottom: 0;
        overflow-y: scroll;
    }

    .sidebar::-webkit-scrollbar {
        width: 0;
    }

    .sidebar-el-menu:not(.el-menu--collapse) {
        width: 210px;
    }

    .sidebar > ul {
        height: 100%;
    }

    .icon {
        margin-right: 5px;
        /* width: 24px; */
        text-align: center;
        font-size: 16px;
        vertical-align: middle;
        margin-left: 5px;
    }



    .el-menu-item.is-active {
        background-color: #13AB81 !important;
    }

    .el-menu-item:focus, .el-menu-item:hover {
        background-color: #13AB81 !important;
    }

    .el-submenu__title:hover{
        background-color: #13AB81 !important;
    }

    .el-submenu__title:focus,.el-submenu__title:hover{
        background-color: #13AB81 !important;
    }

</style>

<style>

</style>